<template>
<div>
  <header><span class="fanhui" @click="fanhui"><i class="el-icon-back"></i>返回</span></header>

  <div class="rq">
    <div class="item" v-for='(item, index) in cars' :key='index'>
      <mt-cell-swipe
        :right="[
          {
            content: '删除',
            style: { background: 'red', color: '#fff' },
            handler: () => deleteCart(item.cp_id, index)
          }
        ]">
        <div>
          <div class="details">
            <img :src="item.imgurl">
            <div class="details-list">
              <span>{{item.cp_name}}</span>
              <div class="list-more">
                <span>介绍：{{item.mssage}}</span>
              </div>
              <div class="list-price">
                ￥{{item.price}}/份
              </div>
            </div>
          </div>
          <div class="num">
            <span>购买数量</span>
            <div>
              <button @click="jianNum(item.cp_id, index)">-</button>
              <input type="text" :value="item.num" disabled>
              <button @click="addNum(item.cp_id, index)">+</button>
            </div>
          </div>
        </div>
      </mt-cell-swipe>
    </div>
  </div>
  <el-dialog title="提交订单" :visible.sync="addDialogVisible" width="80%" @close="addCloseDia">
    <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
      <el-form-item label="餐码" prop="canma">
        <el-input v-model="addForm.canma"></el-input>
      </el-form-item>
      <el-form-item label="金额" prop="price">
        <el-input :value="this.allMoney" disabled></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="beizhu">
        <el-input v-model="addForm.beizhu"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="addDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="addUser">支付</el-button>
    </span>
  </el-dialog>

  <footer>
    <el-badge :value="allCount" class="item">
      <i class="el-icon-shopping-cart-2 gouwuche"></i>
    </el-badge>
    <div class="footer-left">金额：
      <span>￥{{allMoney}}</span>
    </div>
    <div class="footer-right" @click="Sub">提交订单</div>
  </footer>
</div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  inject: ['reload'],
  data () {
    return {
      cars: [],
      num: 0,
      addDialogVisible: false,
      addForm: {
        canma: '',
        price: '',
        beizhu: '',
        caipinxx: [],
        date: ''
      },
      addFormRules: {
        canma: [
          { required: true, message: '请输入取餐码', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    Sub() {
      if (!(this.allMoney === 0)) {
        this.addDialogVisible = true
      } else {
        this.$message({
          message: '购物车还空空入也，不能提交订单哦',
          type: 'warning'
        })
        this.$router.push('/')
      }
    },
    addNum(cpid, index) {
      var item = this.cars[index]
      this.$set(item, 'num', item.num + 1)
      this.$store.commit('ADDNUM', cpid)
    },
    jianNum(cpid, index) {
      var item = this.cars[index]
      this.$set(item, 'num', item.num - 1)
      this.$store.commit('JIANNUM', cpid)
      if (item.num < 1) {
        this.deleteCart(cpid, index)
      }
    },
    deleteCart(cpid, index) {
      this.cars.splice(index, 1)
      this.$store.commit('deleteStoreCart', cpid)
    },
    fanhui() {
      this.$router.go(-1)
    },
    addUser() {
      this.addForm.price = this.allMoney
      this.addForm.caipinxx = this.cars
      this.addForm.date = new Date()
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post('/dingdan', this.addForm)
        if (res.meta.status !== 201) {
          return this.$message.error('支付失败')
        }
        this.$message.success('支付成功')
        // 隐藏添加用户对话框并刷新用户列表
        this.addDialogVisible = false
        localStorage.removeItem('car')
        this.$store.commit('ClearCar')
        this.reload()
        this.$router.push('/')
      })
    },
    addCloseDia() {
      this.$refs.addFormRef.resetFields()
    }
  },
  computed: {
    ...mapGetters(['allMoney', 'allCount'])
  },
  created () {
  },
  mounted () {
    this.$nextTick(function() {
      var cars = JSON.parse(localStorage.getItem('car') || '[]')
      this.cars = cars
    })
  }
}
</script>

<style type="text/css" scoped>

body {
  margin: 0;
  padding: 0;
  background: #f5f5f5;
}

header {
  height: 60px;
  width: 100%;
  position:fixed;
  left: 0;
  top: 0;
  background-color: #fff;
  z-index: 999;
  line-height: 50px;
}
.fanhui {
  text-align: left;
  padding-left: 15px;
}
.fanhui i {
  padding-right: 5px;
}
.rq {
  margin-top: 70px;
  margin-bottom: 60px;
  margin-left: 10px;
  margin-right: 10px;
}
.rq>.item + .item{
  border-top: 1px solid #ccc;
}
.details {
  background: #f5f5f5;
  padding: 15px;
  display: flex;
  font-size: 15px;
  width: 320px;
}
.details img {
  width: 70px;
  height: 70px;
}
.details-list {
  margin-left: 15px;
  color: #888;
}
.list-more span {
  display:block;
  color: #ccc;
}
.list-price {
  font-size: 15px;
  color: red;
}
.num {
  color: #888;
  padding: 10px;
  display: flex;
  justify-content: space-between;
}
.num button {
  width: 31px;
  height: 25px;
  background: #e0e0e0;
  color: #58595b;
  border: none;
  outline: none;
}
.num input {
  width: 37px;
  height: 25px;
  border: none;
  text-align: center;
  background: #fff;
}

footer {
  height: 50px;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fff;
  z-index: 998;
  border-top: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
}
.gouwuche {
  font-size: 30px;
  color: red;
}

.footer-left {
  flex: 1;
  text-align: right;
  line-height: 50px;
  font-size: 16px;
  padding-right: 15px;
}
.footer-left span {
  color: red;
}

.footer-right {
  background: red;
  color: #fff;
  width: 150px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
</style>
